* {
    margin: 0;
    margin-top: 0%;
    margin-bottom: 0%;
    width: auto;
    height: auto;
    padding: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: "Helvetica";
    text-decoration: currentColor;
    background-color: #000;
}

header#canvas {
    width: 67vw;
    height: 49.4vw;
    background-color: #ECEAD4;
    border-style: solid;
    border-radius: 0px;
    border-color: #E2E1E3;
    border-width: 15px;
}

section.B1 {
    width: 5%;
    height: 100%;
    margin-left: 6%;
    margin-top: 0%;
}

section.B2 {
    width: 5%;
    height: 45%;
    margin-left: 11%;
    margin-top: -73.75%;
}

section.B3 {
    width: 5%;
    height: 55%;
    margin-left: 16%;
    margin-top: 0%;
}

section.B4 {
    width: 5%;
    height: 100%;
    margin-left: 21%;
    margin-top: -73.75%;
}

section.B5 {
    width: 5%;
    height: 7%;
    margin-left: 26%;
    margin-top: -73.75%;
}

section.B6 {
    width: 5%;
    height: 12%;
    margin-left: 26%;
    margin-top: 10%;
}

section.B7 {
    width: 5%;
    height: 12%;
    margin-left: 26%;
    margin-top: 10%;
}

section.B8 {
    width: 5%;
    height: 28.35%;
    margin-left: 26%;
    margin-top: 10%;
}


/* BACKGROUND COLORS*/

.B1 {
    background-color: #252525;
}

.B2 {
    background-color: #252525;
}

.B3 {
    background-color: #252525;
}

.B4 {
    background-color: #252525;
}

.B5 {
    background-color: #252525;
}

.B6 {
    background-color: #252525;
}

.B7 {
    background-color: #252525;
}

.B8 {
    background-color: #252525;
}


/* time for hovers */

.B1:hover {
    background-color: #29A0B1;
}

.B2:hover {
    background-color: aqua;
}

.B3:hover {
    background-color: #04D4F0;
}

.B4:hover {
    background-color: #6AF2F0;
}

.B5:hover {
    background-color: #059DC0;
}

.B6:hover {
    background-color: #ddffe7;
}

.B7:hover {
    background-color: #98D7C2;
}

.B8:hover {
    background-color: #167D7F;
}